<template>
  <div class="tabbar f-r a-c">
    <div
      v-for="(item,index) in list"
      :key="index"
      :class="['tabbaritem f-c a-c j-c', item.url === url ? 'active' : '']"
      @click="handleTab(item)"
    >
      <img :src="item.url === url ? item.activeIcon : item.icon" alt="">
      <span class="tabbarname">{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
import cookies from 'js-cookie'
export default {
  name: 'TabBar',
  props: {
    url: String
  },
  data() {
    return {
      list: [
        { name: '首页', icon: require('@/assets/home/home.png'), activeIcon: require('@/assets/home/home_active.png'), url: '/home' },
        { name: '我的', icon: require('@/assets/home/my.png'), activeIcon: require('@/assets/home/my_active.png'), url: '/my' }
      ]
    }
  },
  methods: {
    handleTab(item) {
      const type = cookies.get('bigger')
      console.log(type);
      if (type === '2') {
        this.$router.push({
          path: item.url + '-elder',
          query: {
            vconsole: true
          }
        })
        // if (item.url === '/home') {
        //   this.$router.push({
        //     path: '/homeElder',
        //     query: {
        //       vconsole: true
        //     }
        //   })
        // } else if (item.url === '/my') {
        //   this.$router.push({
        //     path: '/my_Elder',
        //     query: {
        //       vconsole: true
        //     }
        //   })
        // }
      } else {
        this.$router.push({
          path: item.url,
          query: {
            vconsole: true
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;
    width: 100%;
    height: 58px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 0px rgba(12,21,48,0.15);
    border-radius: 25px 25px 0px 0px;
    .tabbaritem {
        flex: 1;
        .tabbarname {
            height: 10px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            margin-top: 8px;
        }
        img {
            width: 16px;
            height: 18px;
        }
    }
}
</style>
